<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="top">
    <div class="topbox">
        <ul>
            <li><a href="#">YY首页</a></li>
            <li><a href="#">多玩游戏网</a></li>
            <li><a href="#">虾哥论坛</a></li>
            <li><a href="#">申请YY</a></li>
            <li><a href="#">帮助中心</a></li>
        </ul>
        <div class="top-kanzhibo"></div>
        <div class="yy8"></div>
        <div class="top-tingjingcai"></div>
        <div class="top-wogexing"></div>
        <div id="top-btn">
            <a href="#">
                <div class="btnt">
                    <div class="down1 down"></div>
                    <div class="yydown1"></div>
                </div>
            </a>

            <div class="todown">向下滑动</div>
            <div class="todownbg"></div>
        </div>
    </div>
</div>
<div class="trr">
    <div class="kuanping">
        <div class="kuanpingtop">
            <div class="kuanping-img">
                <div class="img-width"></div>
                <div class="img-height"></div>
            </div>
            <div class="kuanping-text"></div>
        </div>
    </div>

    <div id="yule">
        <div class="yulezhibo"></div>
        <div class="jiaoyou"></div>
        <div class="youxizhibo"></div>
        <div class="yydaohang"></div>
        <div class="quanxinlanmutext "></div>
    </div>

    <div id="gift">
        <div class="giftview">
            <div class="kiss"></div>
            <div class="biansheng"></div>
        </div>
    </div>
    <!--//个性公会-->
    <div id="gexinggonghui">
        <div id="gonghuiBox">
            <div class="big">
                <div class="mid">
                    <div class="sm"></div>
                </div>
            </div>
            <div class="gexing"></div>
            <div class="zuzhi"></div>
            <div class="xiaotu"></div>
        </div>
    </div>
    <!--//底部动画-->
    <div id="footbox">
        <div id="line">
            <dl id="bukadun">
                <dd id="xingxing"></dd>
                <dd id="huojian"></dd>
                <dd id="yun1"></dd>
                <dd id="yun2"></dd>
            </dl>
            <dl id="budiaoxian">
                <dd id="chilun1"></dd>
                <dd id="chilun2"></dd>
                <dd id="chilun3"></dd>
                <dd id="chilun4"></dd>
            </dl>
            <dl id="buyanchi">
                <dd id="shalou"></dd>
                <dd id="jinzhi"></dd>
            </dl>
            <div id="btn">
                <a href="#">

                    <div class="foot-btn">
                        <div class="foot-btn-down01 foot-btn-down1"></div>
                        <div class="foot-btn-down02"></div>
                    </div>

                </a>
            </div>
            <div class="text"></div>
        </div>

    </div>
    <!--底部版权信息-->
    <div class="footer">
        <div class="footer-nav">
            <a href="">关于欢聚</a><b>|</b>
            <a href="">欢聚招聘</a><b>|</b>
            <a href="">联系欢聚</a><b>|</b>
            <a href="">客服频道：<span>10</span></a><b>|</b>
            <a href="">YY客服中心</a><b>|</b>
            <a href="">隐私权保护政策</a><b>|</b>
            <a href="">版权保护投诉指引</a><b>|</b>
            <a href="">100教育</a><b>|</b>

            <p>增值电信业务经营许可证粤B2-20050785B2-20120129|粤ICP备09075143号</p>

            <p>© 2005-2016 广州华多网络科技有限公司 版权所有</p>
        </div>
    </div>
</div>

<script>

    $(function(){
        $("#top").removeClass("transparents");
        $(".top-kanzhibo").addClass("top-kanzhibomove");
        $(".top-tingjingcai").addClass("top-tingjingcaimove");
        $(".top-wogexing").addClass("top-wogexingmove");
        $(".yy8").addClass("yy8move");
    });

    //    按钮事件
    $("#top-btn>a,#btn>a").hover(
            function () {
                $(".down1").removeClass("down");
                $(".yydown1").addClass("yydown");
                $(".foot-btn-down01").removeClass("foot-btn-down1");
                $(".foot-btn-down02").addClass("foot-btn-down2");
            },
            function () {
                $(".down1").addClass("down");
                $(".yydown1").removeClass("yydown");
                $(".foot-btn-down01").addClass("foot-btn-down1");
                $(".foot-btn-down02").removeClass("foot-btn-down2");
            }
    );

    //滚动事件
    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
//宽屏动画
        if (scrollTop >= 1100) {
            $(".kuanping-img").addClass("kuanping-imgmove");
            $(".kuanpingtop").addClass("kuanpingtopmove");
            $(".kuanping-text").addClass("kuanping-textmove");
        } else {
            $(".kuanping-img").removeClass("kuanping-imgmove");
            $(".kuanpingtop").removeClass("kuanpingtopmove");
            $(".kuanping-text").removeClass("kuanping-textmove");
        }

//        底部字体过渡
        if (scrollTop >= 4700) {
            $(".text").addClass("textmove")
        }
        else {
            $(".text").removeClass("textmove")
        }
//        顶部字体过渡
        if (scrollTop >=1000) {
            $("#top").addClass("transparents");
            $(".top-kanzhibo").removeClass("top-kanzhibomove");
            $(".top-tingjingcai").removeClass("top-tingjingcaimove");
            $(".top-wogexing").removeClass("top-wogexingmove");
            $(".yy8").removeClass("yy8move");
        } else{
            $("#top").removeClass("transparents");
            $(".top-kanzhibo").addClass("top-kanzhibomove");
            $(".top-tingjingcai").addClass("top-tingjingcaimove");
            $(".top-wogexing").addClass("top-wogexingmove");
            $(".yy8").addClass("yy8move");
        }


        // 娱乐动画
        if (scrollTop >= 1700 && scrollTop <= 2700) {
            $(".jiaoyou").addClass("jiaoyoumove");
            $(".youxizhibo").addClass("youxizhibomove");
            $(".yulezhibo").addClass("yulezhibomove");
            $(".quanxinlanmutext").addClass("quanxinlanmutextmove");
        } else {
            $(".jiaoyou").removeClass("jiaoyoumove");
            $(".youxizhibo").removeClass("youxizhibomove");
            $(".yulezhibo").removeClass("yulezhibomove");
            $(".quanxinlanmutext").removeClass("quanxinlanmutextmove");
        }
        //个性公会动画
        if (scrollTop >= 3300 && scrollTop <= 4200) {

            $(".big").addClass("bigmove");
            $(".mid").addClass("midmove");
            $(".sm").addClass("smmove");
            $(".xiaotu").addClass("xiaotumove");
            $(".gexing").addClass("gexingmove");
            $(".zuzhi").addClass("zuzhimove");
        } else {
            $(".big").removeClass("bigmove");
            $(".mid").removeClass("midmove");
            $(".sm").removeClass("smmove");
            $(".xiaotu").removeClass("xiaotumove");
            $(".gexing").removeClass("gexingmove");
            $(".zuzhi").removeClass("zuzhimove");
        }

    }
</script>
</body>
</html>